<template>
  <div>
    <div class="file-list-wrapper">
      <el-header height="auto"
        ><OperationMenu @getFileModel="getFileModel"></OperationMenu
      ></el-header>
    </div>
    <div class="middle-wrapper">
      <!-- 面包屑导航栏 -->
      <BreadCrumb class="breadcrumb"></BreadCrumb>
    </div>
    <!-- 文件列表-表格模式 -->
    <FileTable
      :fileList="fileListData"
      :loading="loading"
      v-if="fileModel === 0"
    ></FileTable>
    <FileGrid
      :fileList="fileListData"
      :loading="loading"
      v-if="fileModel === 1"
    ></FileGrid>
  </div>
</template>

<script setup>
import { storeToRefs } from "pinia";
import OperationMenu from "./components/OperationMenu.vue";
import BreadCrumb from "./common/BreadCrumb.vue";
import FileTable from "./common/FileTable.vue";
import FileGrid from "./components/FileGrid.vue";
import FileTimeLine from "./components/FileTimeLine.vue";
import fileList from "@/store/modules/fileList";
import user from "@/store/modules/user";

import { listFile, pathFile } from "@/api/disk/file";

const router = useRouter();
const route = useRoute();
const store = fileList();
const { dirId } = storeToRefs(store);
const fileListData = ref();
const loading = ref(true);
const fileModel = ref(0);
const data = ref({
  dirId: " ",
  fileName: undefined,
  fileStatus: undefined,
  fileType: undefined,
  isDir: undefined,
  order: "DESC",
  pageNum: 1,
  pageSize: 999,
  sortBy: "id",
  userId: undefined,
});
const subscribe = store.$subscribe((mutation, state) => {
  //监听pinia内dirId状态
  if (mutation.events.key === "dirId" || mutation.events.key === "flushed") {
    showFileList(state.dirId);
  }
});

//文件列表获取
function showFileList(showDirId) {
  loading.value = true;
  //判断是否为最上层文件夹
  if (showDirId.length > 1) {
    //不是最上层文件夹
    data.value.dirId = showDirId;
    let filePath = "";
    pathFile(showDirId).then((res) => {
      res.path.forEach((element) => {
        filePath = `${filePath}/${element}`;
      });
      router.push({ query: { filePath: filePath } });
      listFile(data.value).then((res) => {
        fileListData.value = res.content;
        loading.value = false;
      });
    });
  } else {
    //是最上层文件夹
    router.push({ query: { filePath: "/" } });
    data.value.dirId = " ";
    listFile(data.value).then((res) => {
      fileListData.value = res.content;
      loading.value = false;
    });
  }
}
//获取展示模式
function getFileModel() {
  fileModel.value = localStorage.getItem("qiwen_file_model")
    ? Number(localStorage.getItem("qiwen_file_model"))
    : 0;
  //showFileList(store.dirId);
}
//初始化网盘列表
function setFilePath() {
  user()
    .getInfo()
    .then((res) => {
      data.value.userId = res.id;
      router.push({ query: { filePath: "/" } });
      showFileList(" ");
    });
}
setFilePath();
</script>

<style lang="stylus" scoped>
.file-list-wrapper {
  >>> .el-header {
    padding: 0;
  }

  .middle-wrapper {
    margin-bottom: 8px;
  }

  .pagination-wrapper {
    position: relative;
    border-top: 1px solid $BorderBase;
    height: 44px;
    line-height: 44px;
    text-align: center;

    .current-page-count {
      position: absolute;
      left: 16px;
      height: 32px;
      line-height: 32px;
      font-size: 13px;
      color: $RegularText;
    }
  }
}
</style>
